---
id: codesandbox-button
sidebar_position: 3.5
---

import BrowserWindow from '@site/src/theme/BrowserWindow';

# CodeSandbox button

Adds a button under a code snippet to open/create a CodeSandbox project. (This button is hidden on mobile)

````markdown
```js codesandbox
console.log('hello');
```
````

<BrowserWindow>

```js codesandbox
console.log('hello');
```

</BrowserWindow>

## Multiple files

Use [code tabs](./code-tabs) to create sandboxes with multiple files.

## Templates

By default, rise4fun will use an empty node.js template. You can provide additional named templates.

````markdown
```tsx codesandbox=react
export default () => null;
```
````

<BrowserWindow>

```tsx codesandbox=react
export default () => null;
```

</BrowserWindow>

The `react` template is configured in your `docusaurus.config.js` file
using the same format as described in the [CodeSandbox API](https://codesandbox.io/docs/learn/getting-started/your-first-sandbox#how-it-works).

```js title="./docusaurus.config.js"
const config = configure({
    ...
}, {
    codeSandbox: {
        defaultTemplate: "react",
        templates: {
            react: {
                files: {
                    "package.json": {
                        content: {
                            name: "react",
                            ...
                        },
                    },
                    "sandbox.config.json": {
                        content: {
                            template: "node",
                            view: "terminal",
                            container: {
                                node: "18",
                            },
                        },
                    },
                },
            },
        },
    },
})
```
